<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="static/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="static/assets/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/user-unit.css">
    <script src="static/assets/js/jquery.min.js"></script>
    <script src="static/assets/js/theme.js"></script>
    <script src="static/jquery-validation-1.19.0/jquery.validate.js"></script>
    <script src="static/jquery-validation-1.19.0/localization/messages_zh.js"></script>
    <script src="static/layer/layer.js"></script>
    <style>
        .error{color: red;}
        body {
            padding-left: 5px;
            padding-right: 5px;
        }
    </style>
</head>
<body>
<header data-am-widget="header"
        class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="#user-link" class="">
            <i class="am-header-icon am-icon-book"></i>
        </a>

    </div>
</header>
<div class="am-scrollable-horizontal">
    <form id="addNBForm" class="am-form tpl-form-line-form">
        <div class="am-form-group">
            <input type="text" class="tpl-form-input" id="title" name="title" placeholder="标题">

        </div>

        <div class="am-form-group">
            <input type="text" class="tpl-form-input" id="description" name="description" placeholder="描述">

        </div>
        <div class="am-form-group">

            <input type="submit" id="addNoteBookBtn" value="新建"
                   class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn"/>
        </div>
    </form>
</div>
<script src="static/assets/js/amazeui.min.js"></script>
<script src="static/assets/js/amazeui.datatables.min.js"></script>
<script src="static/assets/js/dataTables.responsive.min.js"></script>
<script>
    $(document).ready(function () {

        $.validator.setDefaults({
            //绑定的是submit事件
            submitHandler: function() {
                console.log("submit事件触发");
                addNoteBook();
            }
        });

        $('#addNBForm').validate({
            rules: {
                title:{required:true},
                description:{required:true}
            },
            messages: {
            }
        });

        function addNoteBook() {
            var data={
                title:$('#title').val(),
                description:$('#description').val()
            };
            console.log(JSON.stringify(data));
            $.ajax({
                type:'POST',
                url:'/addNoteBook',
                //以表单的形式发送，后台可以多参数接收
                // contentType:'application/x-www-form-urlencoded',
                // contentType:'application/json',
                //接收后的数据是Json格式
                dataType:'json',
                data:data,
                success:function(result){
                    debugger;
                    // result=JSON.parse(result);
                    console.log(result);
                    layer.alert(result.info);
                    parent.location.href="/";
                },
                error:function(result) {
                    layer.alert(result.info,{icon:2,time:1000});
                    console.log(result);
                }
            });
        }
    })
</script>
</body>
</html>